<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
      <title>3.4. Dise&ntilde;o de pantalla con smarty/plugins</title>
      <meta name="generator" content="DocBook XSL-NS Stylesheets V1.75.2">
      <link rel="home" href="indice.html" title="Manual Usuario gvHidra">
      <link rel="up" href="ch03.html" title="Cap&iacute;tulo 3. Elementos b&aacute;sicos">
      <link rel="prev" href="ch03s03.html" title="3.3. Men&uacute; de una aplicaci&oacute;n">
      <link rel="next" href="ch03s05.html" title="3.5. C&oacute;digo de la l&oacute;gica de negocio">
   </head>
   <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
      <div class="navheader">
         <table width="100%" summary="Navigation header">
            <tr>
               <th colspan="3" align="center">3.4. Dise&ntilde;o de pantalla con smarty/plugins</th>
            </tr>
            <tr>
               <td width="20%" align="left"><a accesskey="p" href="ch03s03.html">Anterior</a>&nbsp;
               </td>
               <th width="60%" align="center">Cap&iacute;tulo 3. Elementos b&aacute;sicos</th>
               <td width="20%" align="right">&nbsp;<a accesskey="n" href="ch03s05.html">Siguiente</a></td>
            </tr>
         </table>
         <hr>
      </div>
      <div class="section" title="3.4. Dise&ntilde;o de pantalla con smarty/plugins">
         <div class="titlepage">
            <div>
               <div>
                  <h2 class="title" style="clear: both"><a name="d4e1766"></a>3.4. Dise&ntilde;o de pantalla con smarty/plugins
                  </h2>
               </div>
            </div>
         </div>
             
         
             
         <div class="section" title="3.4.1. &iquest;Qu&eacute; es un template?">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e1768"></a>3.4.1. &iquest;Qu&eacute; es un <span class="emphasis"><em>template</em></span>?
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p><a name="crearPantallas"></a>Es un fichero de texto con extensi&oacute;n TPL. La
               idea original de Smarty es que fuese una plantilla o TEMPLATE (de ah&iacute; su
                     extensi&oacute;n). En el caso de gvHidra, se intentaba que la Web se pareciese
                     lo m&aacute;ximo posible a un modelo Cliente-Servidor, con una estructutra de
                     capas para distanciar lo m&aacute;ximo posible el dise&ntilde;o.
            </p>
            
                  
            <p>El fichero .tpl, es una plantilla en la que se dise&ntilde;a la parte de
                     presentaci&oacute;n combinando algunas etiquetas HTML (opcionalmente) con
                     etiquetas propias de Smarty y elementos que denominamos "plugins"
                     creados para gvHidra. Smarty act&uacute;a como motor de esas plantillas, y
                     renderiza las etiquetas y plugins en c&oacute;digo HTML y Javascript.
            </p>
            
                  
            <p>Smarty est&aacute; implementado en PHP, por lo que se emplea ese lenguaje
                     para procesar la presentaci&oacute;n, es decir, los plugins lo utilizan para la
                     l&oacute;gica de presentaci&oacute;n de una plantilla. Esto nos permite obtener una
                     clara separaci&oacute;n entre la aplicaci&oacute;n l&oacute;gica y el contenido en la
                     presentaci&oacute;n. No hay problema entre la l&oacute;gica y su plantilla bajo la
                     condici&oacute;n que esta l&oacute;gica sea estrictamente para presentaci&oacute;n.
            </p>
                
         </div>
         
             
         <div class="section" title="3.4.2. C&oacute;mo realizar un template (tpl)">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e1774"></a>3.4.2. C&oacute;mo realizar un <span class="emphasis"><em>template</em></span> (tpl)
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Los elementos que aparecen entre llaves dentro de la tpl pueden
                     ser tanto plugins propios de gvHidra como etiquetas propias de Smarty.
                     Principalmente utilizaremos plugins para dise&ntilde;ar la presentaci&oacute;n de la
                     aplicaci&oacute;n, aunque en momentos puntuales puede ser que necesitemos el
                     uso de alguna etiqueta de smarty.
            </p>
            
                  
            <p>Tenemos dos tipos de plugins:</p>
            
                  
            <div class="orderedlist">
               <ol class="orderedlist" type="1">
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>Plugin block:</em></span> Son plugins que pueden
                                  anidar otros plugins. Se componen de una etiqueta de apertura y una
                                  de cierre. En la etiqueta de apertura es donde se parametrizar&aacute; el
                                  plugin.
                     </p>
                     
                               
                     <p>Ej. <span class="bold"><strong>{<span class="bold"><strong>CWTabla</strong></span></strong></span> conCheck="true"
                                  seleccionUnica="true" id="Tabla1" datos=$smty_datosTabla<span class="bold"><strong>}</strong></span></p>
                     
                               
                     <p>...</p>
                     
                               
                     <p><span class="bold"><strong>{<span class="bold"><strong>/CWTabla</strong></span>}</strong></span></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>Plugin function:</em></span> Son plugins
                                  independientes, pueden estar dentro de un plugin block. Estos
                                  solamente tienen una etiqueta, y ser&aacute; en ella donde parametrizaremos
                                  el plugin.
                     </p>
                     
                               
                     <p>Ej. <span class="bold"><strong>{CWCampoTexto</strong></span>
                                  nombre="lisCoche" editable="true" size="10"
                                  textoAsociado="Coche"<span class="bold"><strong>}</strong></span></p>
                             
                  </li>
               </ol>
            </div>
            
                  
            <p>La tpl deber&aacute; tener una estructura v&aacute;lida, es decir, hay ciertos
                     plugins que no se deben colocar de forma aleatoria, sino que tienen su
                     orden. En el punto 1.1 del cap&iacute;tulo 2 Anatomia de una ventana gvHidra se
                     explic&oacute; las zonas que existen en una pantalla gvHidra, podemos decir que
                     en la tpl se refleja esa distribuci&oacute;n de la pantalla.
            </p>
            
                  
            <div class="mediaobject" align="center"><img src="images/plantilla.png" align="middle"></div>
            
                  
            <p>La imagen anterior nos muestra una pantalla, ella estar&aacute; englobada
                     por el plugin <span class="bold"><strong>{CWVentana}</strong></span> ... <span class="bold"><strong>{/CWVentana}</strong></span></p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>{CWBarra} ... {/CWBarra}</strong></span>
                                  <span class="emphasis"><em>(1)</em></span></p>
                     
                               
                     <p>En este bloque tendremos el men&uacute; de la aplicaci&oacute;n, si lo hay,
                                  con el plugin <span class="bold"><strong>{CWMenuLayer}</strong></span>. A
                                  continuaci&oacute;n diversa informaci&oacute;n, opcional, que podr&aacute; ser dada con
                                  los par&aacute;metros del plugin CWBarra. Los botones del final de la barra
                                  son fijos de gvHidra, la X vuelve al men&uacute; principal y el otro nos
                                  sacar&aacute; de la aplicaci&oacute;n.
                     </p>
                     
                               
                     <p>Dentro de este bloque podremos colocar botones tooltip, si son
                                  necesarios, que se corresponden con el plugin <span class="bold"><strong>{CWBotonTooltip}</strong></span></p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>{CWMarcoPanel} ...
                                        {/CWMarcoPanel}</strong></span> <span class="emphasis"><em>(2) (3) (4)
                                        (5)</em></span></p>
                     
                               
                     <p>Este plugin engloba todo lo que consideramos panel de la
                                  pantalla. Dentro de &eacute;l se diferenciar&aacute;n los distintos modos de
                                  trabajo, cada modo de trabajo, <span class="emphasis"><em>(2) (3) (4)</em></span>. ir&aacute;
                                  englobado por las etiquetas <span class="bold"><strong>{CWPanel} ...
                                        {/CWPanel}</strong></span>.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>{CWBarraSupPanel} ...
                                        {/CWBarraSupPanel}</strong></span> <span class="emphasis"><em>(2)</em></span></p>
                     
                               
                     <p>Dentro de este bloque podremos insertar el plugin <span class="bold"><strong>{CWBotonTooltip}</strong></span> para crear los botones de la
                                  derecha.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>{CWContenedor} ...
                                        {/CWContenedor}</strong></span> <span class="emphasis"><em>(3)</em></span></p>
                     
                               
                     <p>Aqu&iacute; es donde dise&ntilde;aremos la parte principal de la pantalla,
                                  donde distribuiremos los campos, listas... donde ya utilizaremos
                                  unos plugins u otros dependiendo de si queremos dise&ntilde;ar un tabular o
                                  un registro.
                     </p>
                     
                               
                     <div class="variablelist">
                        <dl>
                           <dt><span class="term"><span class="emphasis"><em>Tabular</em></span></span></dt>
                           <dd>
                                              
                              <p>Necesitaremos insertar el plugin {CWTabla} al que se le
                                                 pasar&aacute;n ciertos par&aacute;metros, entre ellos est&aacute; el m&aacute;s
                                                 importante, <span class="emphasis"><em>datos</em></span>, que ser&aacute; el que
                                                 contendr&aacute; todos los datos.
                              </p>
                              
                                              
                              <p>Tendr&aacute; una estructura como la siguiente:</p>
                              
                                              
                              <div class="variablelist">
                                 <dl>
                                    <dt><span class="term">{CWTabla}</span></dt>
                                    <dd>
                                                             
                                       <p><span class="bold"><strong>{CWFila}</strong></span></p>
                                       
                                                             
                                       <p>...</p>
                                       
                                                             
                                       <p><span class="bold"><strong>{/CWFila}</strong></span></p>
                                                           
                                    </dd>
                                    <dt><span class="term">{/CWTabla}</span></dt>
                                    <dd></dd>
                                 </dl>
                              </div>
                                            
                           </dd>
                        </dl>
                     </div>
                     
                               
                     <div class="variablelist">
                        <dl>
                           <dt><span class="term"><span class="emphasis"><em>Registro</em></span></span></dt>
                           <dd>
                                              
                              <p>Necesitaremos insertar el plugin {CWFichaEdicion} al que
                                                 se le pasar&aacute;n ciertos par&aacute;metros, entre ellos est&aacute; el m&aacute;s
                                                 importante, <span class="emphasis"><em>datos</em></span>, que ser&aacute; el que
                                                 contendr&aacute; todos los datos.
                              </p>
                              
                                              
                              <p>Tendr&aacute; una estructura como la siguiente:</p>
                              
                                              
                              <div class="variablelist">
                                 <dl>
                                    <dt><span class="term">{CWFichaEdicion}</span></dt>
                                    <dd>
                                                             
                                       <p><span class="bold"><strong>{CWFicha}</strong></span></p>
                                       
                                                             
                                       <p>...</p>
                                       
                                                             
                                       <p><span class="bold"><strong>{/CWFicha}</strong></span></p>
                                                           
                                    </dd>
                                    <dt><span class="term">{/CWFichaEdicion}</span></dt>
                                    <dd></dd>
                                 </dl>
                              </div>
                                            
                           </dd>
                        </dl>
                     </div>
                     
                               
                     <p>Un caso especial ser&aacute; cuando estamos dise&ntilde;ando la b&uacute;squeda, en
                                  este caso tenemos un {CWFicha} pero sin necesidad de estar dentro de
                                  un bloque {CWFichaEdicion}.
                     </p>
                     
                               
                     <div class="variablelist">
                        <dl>
                           <dt><span class="term"><span class="emphasis"><em>B&uacute;squeda</em></span></span></dt>
                           <dd>
                                              
                              <p>Tendr&aacute; una estructura como la siguiente:</p>
                              
                                              
                              <div class="variablelist">
                                 <dl>
                                    <dt><span class="term">{CWFicha}</span></dt>
                                    <dd>
                                                             
                                       <p>...</p>
                                                           
                                    </dd>
                                    <dt><span class="term">{/CWFicha}</span></dt>
                                    <dd></dd>
                                 </dl>
                              </div>
                                            
                           </dd>
                        </dl>
                     </div>
                     
                               
                     <p>En esta zona es donde conoceremos la totalidad de los datos
                                  con los que se va a trabajar, por eso tenemos la excepci&oacute;n de que el
                                  plugin <span class="bold"><strong>{CWPaginador}</strong></span> se ubica
                                  dentro de este bloque aunque f&iacute;sicamente luego se vea en el bloque
                                  del <span class="bold"><strong>{CWBarraInfPanel}</strong></span>.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>{CWBarraInfPanel} ...
                                        {/CWBarraInfPanel}</strong></span> <span class="emphasis"><em>(4)</em></span></p>
                     
                               
                     <p>En esta barra se incluir&aacute;n, si se quieren, los botones que se
                                  corresponden con el plugin <span class="bold"><strong>{CWBoton}</strong></span>.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="bold"><strong>{CWContenedorPestanyas} ...
                                        {/CWContenedorPestanyas}</strong></span> <span class="emphasis"><em>(5)</em></span></p>
                     
                               
                     <p>Este bloque engloba las pesta&ntilde;as que aparecer&aacute;n en la
                                  pantalla, tendremos que insertar un plugin <span class="bold"><strong>{CWPestanya}</strong></span> por cada pesta&ntilde;a que
                                  queramos.
                     </p>
                             
                  </li>
               </ul>
            </div>
            
                  
            <p>Hay una serie de plugins que ser&aacute;n obligatorios y otros
                     opcionales, que a&ntilde;adiremos o quitaremos seg&uacute;n la funcionalidad que se le
                     quiera dar a la pantalla. En la <a class="link" href="apb.html#inicioDocPlugins">documentaci&oacute;n de los plugins</a> se
                     encuentra la definici&oacute;n de cada uno, as&iacute; como la serie de argumentos que
                     contendr&aacute;n.
            </p>
            
                  
            <p>[<span class="citation"><span class="emphasis"><em>NOTA: En la carpeta 'igep/doc/plantillasTipo'
                              hay un ejemplo de plantilla para cada tipo de pantalla a
                              crear.</em></span></span>]
            </p>
            
                  
            <p>[<span class="citation"><span class="emphasis"><em>NOTA: Tener en cuenta a la hora de dise&ntilde;ar la
                              plantilla la resoluci&oacute;n de pantalla de los usuarios. Si por ejemplo
                              tienen 800x600 nos caben unas 12 l&iacute;neas en una tabla, a diferencia de
                              las 32 que nos caben en una resoluci&oacute;n 1280x1024
                              .</em></span></span>]
            </p>
            
                  
            <p>Vamos a presentar la estructura obligatoria para los principales
                     modos de trabajo:
            </p>
            
                  
            <div class="section" title="3.4.2.1. Estructura para mantenimientos generales">
               <div class="titlepage">
                  <div>
                     <div>
                        <h4 class="title"><a name="d4e1907"></a>3.4.2.1. Estructura para mantenimientos generales
                        </h4>
                     </div>
                  </div>
               </div>
                       
               
                       
               <div class="informalexample">
                            
                  
                            <pre class="programlisting">{CWVentana ...}
   {CWBarra ...}
      si existe men&uacute; habr&aacute; {CWMenuLayer}
   {/CWBarra}

   {CWMarcoPanel ...}

      PANEL DE FILTRO
      {CWPanel id="fil" ...}
         {CWBarraSupPanel ...}
            Si existen botones ToolTip {CWBotonToolTip ...}
         {/CWBarraSupPanel}
         {CWContenedor}
            {CWFicha}

            {/CWFicha}
         {/CWContenedor}
         {CWBarraInfPanel}
            Si existen botones {CWBoton ...}
         {/CWBarraInfPanel}
      {/CWPanel}

      PANEL DE EDICI&Oacute;N
      {CWPanel id="edi|ediMaestro|ediDetalle" ... }
         {CWBarraSupPanel ...}
            Si existen botones ToolTip {CWBotonToolTip ...}
         {/CWBarraSupPanel}
      {CWContenedor}
         {CWFichaEdicion ...}
            {CWFicha}

            {/CWFicha}
         {/CWFichaEdicion}
      {/CWContenedor}
      {CWBarraInfPanel}
         Si existen botones {CWBoton ...}
      {/CWBarraInfPanel}
   {/CWPanel}

   PANEL LISTADO
   {CWPanel id="lis|lisMaestro|lisDetalle" ...}
      {CWBarraSupPanel ...}
         Si existen botones ToolTip {CWBotonToolTip ...}
      {/CWBarraSupPanel}
      {CWContenedor}
         {CWTabla ...}
            {CWFila ...}

            {/CWFila}
         {/CWTabla}
      {/CWContenedor}
      {CWBarraInfPanel}
         Si existen botones {CWBoton ...}
      {/CWBarraInfPanel}
   {/CWPanel}

   {CWContenedorPestanyas ...}
      aparecera un {CWPestanya ... } por cada pesta&ntilde;a que tengamos.
   {/CWContenedorPestanyas}
 {/CWMarcoPanel}
{/CWVentana}</pre>
                          </div>
                     
            </div>
            
                  
            <div class="section" title="3.4.2.2. Mejorando el aspecto visual">
               <div class="titlepage">
                  <div>
                     <div>
                        <h4 class="title"><a name="d4e1911"></a>3.4.2.2. Mejorando el aspecto visual
                        </h4>
                     </div>
                  </div>
               </div>
                       
               
                       
               <p>Vamos a dar unas indicaciones a la hora de la distribuci&oacute;n y
                          aspecto de los campos en el panel para intentar mejorar su
                          visualizaci&oacute;n.
               </p>
               
                       
               <div class="orderedlist">
                  <ol class="orderedlist" type="1">
                     <li class="listitem">
                                    
                        <p><span class="bold"><strong>Distribuci&oacute;n de campos dentro de un
                                             CWFicha.</strong></span></p>
                        
                                    
                        <p>Para la distribuci&oacute;n de los campos en la ficha nos tendremos
                                       que apoyar en el lenguaje HTML. Etiquetas como &lt;br /&gt;
                                       (saltos de l&iacute;nea), &amp;nbsp; (espacios en blanco) y &lt;table&gt;
                                       (tablas) nos ayudar&aacute;n a distribuir los campos en el panel. Si nos
                                       decantamos por la distribuci&oacute;n mediante tablas, utilizar el estilo
                                       asociado llamado "<span class="emphasis"><em>formularios</em></span>", ver punto
                                       <a class="link" href="ch03s06.html#C3Estilo">Personalizando el estilo</a>.
                        </p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p><span class="bold"><strong>Tabulaci&oacute;n entre los
                                             campos.</strong></span></p>
                        
                                    
                        <p>Para facilitar la navegaci&oacute;n entre los campos de una
                                       ventana, todos los componentes disponen de un par&aacute;metro <span class="bold"><strong>tabindex</strong></span> que permite indicar el orden en el
                                       que se quieren recorrer. Por convenio, recomendamos asignar
                                       valores de 10 en 10 entre los componentes, esto facilita la
                                       incorporaci&oacute;n de nuevos componentes sin problemas.
                        </p>
                        
                                    
                        <div class="informalexample">
                                         
                           
                                         <pre class="programlisting">{CWCampoTexto tabindex="10" ...}
{CWLista tabindex="20" ...}</pre>
                                       </div>
                        
                                    
                        <p>Los campos no editables no entrar&aacute;n en esta navegaci&oacute;n con
                                       el tabulador. Si, por una acci&oacute;n de interfaz un campo se convierte
                                       en editable, el sistema le asignar&aacute; valor del par&aacute;metro "tabindex"
                                       de la tpl. Otra opci&oacute;n es que el programador desde una acci&oacute;n de
                                       interfaz cambie din&aacute;micamente el tabindex de un componente. Para
                                       ello dispone del m&eacute;todo <span class="bold"><strong>setTabIndex</strong></span>.
                        </p>
                        
                                    
                        <div class="informalexample">
                                         
                           
                                         <pre class="programlisting">$objIU-&gt;setTabIndex('field1',30);</pre>
                                       </div>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p><span class="bold"><strong>Resaltado de filas en un
                                             CWTabla.</strong></span></p>
                        
                                    
                        <p>Para poder resaltar una fila en una tabla de gvHidra tenemos
                                       que indic&aacute;rselo en la construcci&oacute;n de la misma (t&iacute;picamente en una
                                       acci&oacute;n buscar m&eacute;todo postBuscar). Para ello utilizaremos el m&eacute;todo
                                       del objDatos <span class="bold"><strong>setRowColor</strong></span>, el cual
                                       tiene dos par&aacute;metros: la fila y el color. Actualmente, los
                                       posibles valores de color son: 'alerta', 'aviso', 'error' y
                                       'sugerencia'.
                        </p>
                        
                                    
                        <p>Ejemplo:</p>
                        
                                    
                        <div class="informalexample">
                                         <pre class="programlisting">function <span class="bold"><strong>postBuscar</strong></span>($objDatos)
{
   //Obtenemos la matriz de datos
   $m_datos = $objDatos-&gt;<span class="bold"><strong>getAllTuplas</strong></span>();

   foreach($m_datos as $indice =&gt;$tupla)
   {
      //Si el tipo de la tupla es urgente lo marcamos con un color.
      if($tupla['tipo']=='URGENTE')
         $objDatos-&gt;<span class="bold"><strong>setRowColor</strong></span>($m_datos[$indice],'alerta');
      else
         $objDatos-&gt;<span class="bold"><strong>setRowColor</strong></span>($m_datos[$indice],'none');
   }

   //Guardamos la matriz de datos modificada
   $objDatos-&gt;<span class="bold"><strong>setAllTuplas</strong></span>($m_datos);
}</pre>
                                       </div>
                                  
                     </li>
                  </ol>
               </div>
                     
            </div>
                
         </div>
         
             
         <div class="section" title="3.4.3. Documentaci&oacute;n de los plugins">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e1945"></a>3.4.3. Documentaci&oacute;n de los plugins
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>La documentaci&oacute;n respecto a los plugins, descripci&oacute;n, par&aacute;metros y
                     uso la podemos ver en el <a class="link" href="apb.html#inicioDocPlugins">Ap&eacute;ndice B
                        Documentaci&oacute;n de plugins gvHIDRA</a>.
            </p>
                
         </div>
           
      </div>
      <div class="navfooter">
         <hr>
         <table width="100%" summary="Navigation footer">
            <tr>
               <td width="40%" align="left"><a accesskey="p" href="ch03s03.html">Anterior</a>&nbsp;
               </td>
               <td width="20%" align="center"><a accesskey="u" href="ch03.html">Subir</a></td>
               <td width="40%" align="right">&nbsp;<a accesskey="n" href="ch03s05.html">Siguiente</a></td>
            </tr>
            <tr>
               <td width="40%" align="left" valign="top">3.3. Men&uacute; de una aplicaci&oacute;n&nbsp;</td>
               <td width="20%" align="center"><a accesskey="h" href="indice.html">Inicio</a></td>
               <td width="40%" align="right" valign="top">&nbsp;3.5. C&oacute;digo de la l&oacute;gica de negocio</td>
            </tr>
         </table>
      </div>
   </body>
</html>